<template>
	<div class="dayRow">
		<div class="dayRowItem">
			<div class="total">
				<div class="val">
					<gsapNum :number="47"></gsapNum>
				</div>
				<div class="label">总项目</div>
			</div>
			<div class="type">
				<div class="label">开标中</div>
				<div class="val"><span><gsapNum :number="20"></gsapNum></span></div>
			</div>
			<div class="type">
				<div class="label">评标中</div>
				<div class="val"><span><gsapNum :number="15"></gsapNum></span></div>
			</div>
			<div class="type">
				<div class="label">已完成</div>
				<div class="val"><span><gsapNum :number="12"></gsapNum></span></div>
			</div>
		</div>
		<div class="dayRowItem">
			<div class="data">
				<div class="val"><gsapNum :number="7"></gsapNum></div>
				<div class="label">工程建设</div>
			</div>
			<div class="data">
				<div class="val"><gsapNum :number="20"></gsapNum></div>
				<div class="label">政府采购</div>
			</div>
			<div class="data">
				<div class="val"><gsapNum :number="20"></gsapNum></div>
				<div class="label">权益类</div>
			</div>
		</div>
	</div>
</template>

<script>
	import gsapNum from "@/components/gsapNum/index.vue";
	export default {
		name: "item",
		data() {
			return {

			}
		},
		mounted() {
		},
		components: {
			gsapNum
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.pageItemBody {
		width: 100%;
		position: relative;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: nowrap;
		flex-direction: column;
		z-index: 1;
		align-content: flex-start;
	}

	.dayRow {
		height: 100%;
		display: flex;
		flex-direction: column;

		.dayRowItem {
			display: flex;
			height: 50%;

			.total {
				flex: 1;
				min-width: 0;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				background-image: url('assets/total.png');
				background-repeat: no-repeat;
				background-position: top center;
				background-size: 100% 100%;
				padding: 5px 0 0;

				.val {
					font-size: 28px;
					
					span{
						font-family: YouSheBiaoTiHei;
						background: linear-gradient(180deg, #FFFFFF 42.52%, #82C2FF 70.97%);
						-webkit-background-clip: text;
						-moz-background-clip: text;
						background-clip: text;
						color: transparent;
					}
					
				}

				.label {
					color: #C9EFFF;
					font-size: 16px;
				}
			}

			.type {
				width: 23%;
				display: flex;
				flex-direction: column;
				justify-content: center;



				.val {
					padding: 4px 0;
					padding-left: 24px;
					background-image: url('assets/rect.png');
					background-repeat: no-repeat;
					background-position: left bottom;
					background-size: auto 28px;

					span {
						font-size: 28px;
						font-family: YouSheBiaoTiHei;
						background: linear-gradient(180deg, #FFFFFF 42.52%, #82C2FF 70.97%);
						-webkit-background-clip: text;
						-moz-background-clip: text;
						background-clip: text;
						color: transparent;
					}
				}

				.label {
					color: #C9EFFF;
					font-size: 16px;
					padding-left: 24px;
					position: relative;

					&::before {
						position: absolute;
						content: '';
						left: 5px;
						top: 50%;
						transform: translateY(-50%);
						width: 6px;
						height: 6px;
						background: #58AFFF66;
						border-radius: 50%;
						border: 1px solid #4CC9FF;
					}

					&::after {
						position: absolute;
						content: '';
						left: 0px;
						top: 50%;
						transform: translateY(-50%);
						width: 12px;
						height: 12px;
						background-image: radial-gradient(rgba(173, 230, 255, .4), rgba(10, 181, 255, 0.35));
						border-radius: 50%;
						filter: blur(4px)
					}
				}
			}
		
		    .data {
		    	flex: 1;
		    	text-align: center;
		    	display: flex;
		    	flex-direction: column;
		    	justify-content: space-between;
		    	padding: 11px 0 16px;
		    	background-image: url('assets/bottom.png');
		    	background-size: auto 52%;
		    	background-repeat: no-repeat;
		    	background-position: top 20px center;
		    
		    	.val {
		    		font-size: 28px;
		    		font-family: 'DIN-Bold';
		    		background: linear-gradient(180deg, #00C2FF 0%, #FFFFFF 100%);
		    		-webkit-background-clip: text;
		    		-moz-background-clip: text;
		    		background-clip: text;
		    		color: transparent;
		    
		    
		    	}
		    
		    	.label {
		    		color: #C9EFFF;
		    		font-size: 16px;
		    	}
		    }
		}
	}
	
	.total .val ::v-deep span{
		font-family: YouSheBiaoTiHei;
		background: linear-gradient(180deg, #FFFFFF 42.52%, #82C2FF 70.97%);
		-webkit-background-clip: text;
		-moz-background-clip: text;
		background-clip: text;
		color: transparent;
	}
	.type .val ::v-deep span{
		font-family: YouSheBiaoTiHei;
		background: linear-gradient(180deg, #FFFFFF 42.52%, #82C2FF 70.97%);
		-webkit-background-clip: text;
		-moz-background-clip: text;
		background-clip: text;
		color: transparent;
	}
</style>